<template>
	<el-collapse v-model="activeNames">
		<el-collapse-item name="1">
			<template slot="title">
				<el-divider content-position="left">
					<view class="bold-text user-select-none">cc.Mask</view>
				</el-divider>
			</template>

			<!-- enabled -->
			<el-row>
				<el-col :span="spacing">
					<el-tooltip content="是否启用" placement="top" effect="light">
						<view class="">Enabled</view>
					</el-tooltip>
				</el-col>
				<el-col :span="24-spacing">
					<el-checkbox v-model="treeItemData.maskData.enabled" @change="handleChangeEnabled">启用</el-checkbox>
				</el-col>
			</el-row>
			<!-- type -->
			<el-row class="u-m-t-8">
				<el-col :span="spacing">Type</el-col>
				<el-col :span="24-spacing">
					<el-select v-model="treeItemData.maskData.type" placeholder="请选择" size="mini"
						@change="handleChangeType">
						<el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-col>
			</el-row>
			<!-- inverted -->
			<el-row class="u-m-t-8">
				<el-col :span="spacing">Inverted</el-col>
				<el-col :span="24-spacing">
					<el-checkbox v-model="treeItemData.maskData.inverted" @change="handleChangeInverted">反向遮罩</el-checkbox>
				</el-col>
			</el-row>
			
			<!-- segements -->
			<el-row class="u-m-t-8" v-if="treeItemData.maskData.type == 1">
				<el-col :span="spacing">Segements</el-col>
				<el-col :span="24-spacing">
					<el-input-number size="mini" v-model="treeItemData.maskData.segements" controls-position="right"
						@change="handleChangeSegements" step-strictly :min="3"></el-input-number>
				</el-col>
			</el-row>
			<!-- alphaThreshold -->
			<el-row class="u-m-t-8" v-if="treeItemData.maskData.type == 2">
				<el-col :span="spacing">AlphaThreshold</el-col>
				<el-col :span="24-spacing">
					<el-slider v-model="treeItemData.maskData.alphaThreshold" show-input size="mini" :min="0" :max="1" :step="0.1" input-size="mini" @change="handleChangeAlphaThreshold">
					    </el-slider>
				</el-col>
			</el-row>


		</el-collapse-item>
	</el-collapse>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: "ui-mask",
		props: [
		],
		computed: {
			...mapState({
				uuid: state => state.app.uuid,
				treeItemData: state => state.app.treeItemData,
			})
		},
		data() {
			return {
				activeNames: ['1'],
				spacing: 4,
				typeOptions: [{
					value: 0,
					label: 'RECT'
				}, {
					value: 1,
					label: 'ELLIPSE'
				}, {
					value: 2,
					label: 'IMAGE_STENCL'
				}],
			};
		},
		methods: {
			pluginSetMaskData(key, value, isNumber) {
				this._evalCode(
					"window.pluginSetMaskData(" +
					"'" + this.uuid + "'," +
					"'" + key + "'," +
					"'" + value + "'," +
					"'" + isNumber + "'" +
					")");
				this._freshNode();
			},
			handleChangeEnabled(value) {
				this.pluginSetMaskData('enabled', value);
			},
			handleChangeType(value){
				this.pluginSetMaskData('type', value, true);
			},
			handleChangeInverted(value) {
				this.pluginSetMaskData('inverted', value);
			},
			handleChangeSegements(value){
				this.pluginSetMaskData('segements', value, true);
			},
			handleChangeAlphaThreshold(value){
				this.pluginSetMaskData('alphaThreshold', value, true);
			}
		}
	}
</script>

<style>
	.el-collapse {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
		border-radius: 4px;
		border: 1px solid #EBEEF5;
		background-color: #FFF;
		overflow: hidden;
		color: #303133;
		-webkit-transition: .3s;
		transition: .3s;
		border-top: none;
		border-bottom: none;
		padding: 0px 15px;
		margin-top: 10px;
	}
</style>